<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta name="format-detection" content="telephone=no">
    <title>四川友迷会2017巡演报名</title>
    <style type="text/css">
        .max_box{
            max-width: 750px;
            margin: 0 auto;
        }
        html{
            font-size: 0;
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #1a000b;
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei",Arial,Verdana;
        }
        input{
            outline:none;
            font-family: "Microsoft YaHei",Arial,Verdana;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0px;
            visibility: hidden;
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .fl_lt {
            float: left;
        }

        .fl_rt {
            float: right;
        }
        .relative{
            position: relative;
        }
        .index_area{
            line-height: 0;
            font-size: 0;
        }
        .index_area img{
            width: 100%;
        }
        .index_content{
            background-image: url("img/index_bg.jpg");
            background-repeat:no-repeat;
            background-size:100% 100%;
            overflow: hidden;
        }
        .form_box{
            background-image: url("img/input_bg.png");
            background-repeat:no-repeat;
            background-size:100% 100%;
            margin-top: 18rem;
            width: 100%;
            color: #ffb694;
            overflow: hidden;
        }
        .form_box h1{
            font-size: 1.7rem;
            text-align: center;
            margin-top: 3rem;
        }
        .form_box ul{
            margin:1rem 3rem 0 2.5rem;
            padding:0;
            border:0;
            outline:0;
            vertical-align:baseline;
        }
        li{
            list-style:none;
        }
        .list{
            margin-top: 1.8rem;
        }
        .input_line{
            border-bottom: 1px solid #faae8a;
            padding-bottom: 0.2rem;
            width: 70%;
        }
        .radio_box{
            width: 70%;
        }
        .radio_width{
            width: 26%;
            margin-top: 1rem;
        }
        .label{
            font-size: 1.4rem;
            margin-top: 0.4rem;
        }
        .label b{
            margin-right: 1rem;
        }
        .label p{
            font-size: 1.2rem;
            color: #ff8d57;
            margin-top: 0;
            padding-left: 1.1rem;
        }
        .input_line input{
            border: 0;
            background-color: rgba(0,0,0,0);
            color: #ffffff;
            font-size: 1.4rem;
            width: 100%;
        }
        .radio_box input[type='radio'],.radio_box input[type="checkbox"]{
            display:none;
        }
        .radio_box label{
            padding-left: 3rem;
            position: relative;
            font-size: 1.4rem;
            color: #ffffff;
        }
        .radio_dot{
            position: absolute;
            top: 0;
            left: 0;
            width: 1.5rem;
            height: 1.5rem;
            background-image: url("img/radio_bg.png");
            background-repeat:no-repeat;
            background-position:-3.4rem -0.2rem;
            background-size: 380%;
        }
        .checked_dot{
            background-position:-0.6rem -0.2rem;
        }
        .mg_lt_14{
            margin-left: 1.4rem;
            margin-top: 0.6rem;
            height: 3.6rem;
        }

        .yuan{
            color: #ffb693;
        }
        .number_box{
            margin-right: 2.3rem;
            border: 1px solid #faae8a;
            padding: 0 3.6rem;
        }
        .number_box b{
            z-index: 2;
            position: absolute;
            top: 0.3rem;
            text-align: center;
            bottom: 0;
            width: 3.6rem;
            cursor: pointer;
            /*line-height: 100%;*/
            font-size: 3rem;
            color: #faae8a;
        }
        .number_box input{
            border: 0;
            width: 6.6rem;
            text-align: center;
            background-color: rgba(0,0,0,0);
            font-size: 1.4rem;
            padding: 1rem 0;
            color: #ffffff;
            border-left: 1px solid #faae8a;
            border-right: 1px solid #faae8a;
            border-radius: 0;
            margin: 0;
        }
        .unit{
            position: absolute;
            right: 0;
            top: 1.1rem;
            font-size: 1.4rem;
            color: #ffb693;
        }
        .reduce{
            left: 0;
        }
        .plus{
            right: 2.3rem;
        }
        .sign_up{
            display: block;
            border: 0;
            background-color: #ffb693;
            font-size: 1.7rem;
            color: #c61f33;
            width: 72%;
            margin: 2rem auto 5rem;
            padding: 1.3rem 0;
            font-weight: bold;
        }
        footer{
            margin-top: 5rem;
            text-align: center;
        }
        footer img{
            width: 31%;
        }
        footer p{
            margin-top: 0.8rem;
            margin-bottom: 2rem;
            font-size: 1.2rem;
            color: #fefefe;
        }
        .mg_top_5{
            margin-top: 0.3rem;
        }
        .warn{
            position: fixed;
            top: 40%;
            font-size: 1.6rem;
            width: 100%;
            display: table-cell;
            text-align: center;
            z-index: 2;
            display: none;
        }
        .warn-word{
            display: inline-block;
            padding: 1rem;
            background: rgba(0,0,0,.65);
            color: #fcfcfc;
            min-width: 35%;
            border-radius: 0.7rem;
        }
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #ba2929;}
        input:-moz-placeholder, textarea:-moz-placeholder {color:#ba2929;}
        input::-moz-placeholder, textarea::-moz-placeholder {color:#ba2929;}
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#ba2929;}
    </style>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth>=640){
                            docEl.style.fontSize = '100%';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 640) + '%';
                        }
                    };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body>
<div class="max_box">
    <section class="index_area">
        <img src="img/banner.jpg" alt="友迷会" />
    </section>
    <section class="index_content">
        <article class="form_box">
            <form method="post" id="fan_sign_up">
                <h1>我要报名</h1>
                <ul>
                    <li class="clearfix list">
                        <div class="fl_lt label">
                            <b>&middot;</b>姓名
                        </div>
                        <div class="fl_rt input_line">
                            <input type="text" name="name" value="陈小霞" />
                        </div>
                    </li>
					<li class="clearfix list">
                        <div class="fl_lt label">
                            <b>&middot;</b>电话
                        </div>
                        <div class="fl_rt input_line">
                            <input type="number" name="phone" value="" />
                        </div>
                    </li>
                    <li class="clearfix list">
                        <div class="fl_lt label">
                            <b>&middot;</b>想去的城市
                        </div>
                        <div class="fl_rt input_line">
                            <input type="text" name="preferCity" value="" placeholder="成都" />
                        </div>
                    </li>
                    <li class="clearfix list">
                        <div class="fl_lt label">
                            <b>&middot;</b>性别
                        </div>
                        <div class="fl_rt radio_box mg_top_5 sex_box">
                            <input type="radio" name="sex" value="男" checked />
                            <label>
                                <div class="radio_dot checked_dot"></div>
                                男
                            </label>
                            <input type="radio" name="sex" value="女" />
                            <label style="margin-left: 2rem;">
                                <div class="radio_dot"></div>
                                女
                            </label>
                        </div>
                    </li>
                    <li class="clearfix list">
                        <div class="fl_lt label">
                            <b>&middot;</b>请选择您打算购买的门票价格及数量
                            <p>（此价格为预估价）可多选</p>
                        </div>
                    </li>
                    <li class="clearfix mg_lt_14">
                        <div class="fl_lt radio_box radio_width">
                            <input type="radio" name="per" value="2017" checked />
                            <label>
                                <div class="radio_dot checked_dot"></div>
                                2017<span class="yuan">元</span>
                            </label>
                        </div>
                        <div class="fl_rt relative">
                            <div class="number_box">
                                <b class="reduce">&minus;</b>
                                <input type="number" name="count" value="1" />
                                <b class="plus">+</b>
                            </div>
                            <span class="unit">张</span>
                        </div>
                    </li>

                    <li class="clearfix mg_lt_14">
                        <div class="fl_lt radio_box radio_width">
                            <input type="radio" name="per" value="1580" />
                            <label>
                                <div class="radio_dot">
                                    <div class="checked_dot"></div>
                                </div>
                                1580<span class="yuan">元</span>
                            </label>
                        </div>
                    </li>

                    <li class="clearfix mg_lt_14">
                        <div class="fl_lt radio_box radio_width">
                            <input type="radio" name="per" value="1180" />
                            <label>
                                <div class="radio_dot">
                                    <div class="checked_dot"></div>
                                </div>
                                1180<span class="yuan">元</span>
                            </label>
                        </div>
                    </li>

                    <li class="clearfix mg_lt_14">
                        <div class="fl_lt radio_box radio_width">
                            <input type="radio" name="per" value="880" />
                            <label>
                                <div class="radio_dot">
                                    <div class="checked_dot"></div>
                                </div>
                                880<span class="yuan">元</span>
                            </label>
                        </div>
                    </li>

                    <li class="clearfix mg_lt_14">
                        <div class="fl_lt radio_box radio_width">
                            <input type="radio" name="per" value="580" />
                            <label>
                                <div class="radio_dot">
                                    <div class="checked_dot"></div>
                                </div>
                                580<span class="yuan">元</span>
                            </label>
                        </div>
                    </li>

                    <li class="clearfix mg_lt_14">
                        <div class="fl_lt radio_box radio_width">
                            <input type="radio" name="per" value="380" />
                            <label>
                                <div class="radio_dot">
                                    <div class="checked_dot"></div>
                                </div>
                                380<span class="yuan">元</span>
                            </label>
                        </div>
                    </li>
                </ul>
                <button type="button" class="sign_up">
                    点击报名
                </button>
            </form>
        </article>

        <footer>
            <img src="img/qr_code.jpg" />
            <p>四川友迷会2017巡演工作组</p>
        </footer>
    </section>

</div>
<%--提示star--%>
<div class="warn">
    <div class="warn-word">分的说法是发生的</div>
</div>
<%--提示end--%>
</body>
<script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".sex_box label").click(function(){
            $(this).parents(".sex_box").find(".radio_dot").removeClass("checked_dot");
            $(this).find(".radio_dot").addClass("checked_dot");
            $(this).prev().attr("checked", true);
        });

        $(".mg_lt_14 label").click(function(){
            $(".mg_lt_14 label").find(".radio_dot").removeClass("checked_dot");
            $(this).find(".radio_dot").addClass("checked_dot");
            $(this).prev().attr("checked", true);
            var number_html = $(".mg_lt_14 .relative").prop("outerHTML");
            $(".mg_lt_14 .relative").remove();
            $(this).parents(".mg_lt_14").append(number_html);
        });

        $(document).on("click",".mg_lt_14 .plus",function(){
            if($(this).parents(".number_box").find("input").val() == ""){
                number = 0;
                $(this).parents(".number_box").find("input").val(number+1);
            }else{
                var number = parseInt($(this).parents(".number_box").find("input").val());
                $(this).parents(".number_box").find("input").val(number+1);
            }
        });

        $(document).on("click",".mg_lt_14 .reduce",function(){
            var number = $(this).parents(".number_box").find("input").val();
            if(number == "" || number == 0 || number == 1){
                number = 0;
                $(this).parents(".number_box").find("input").val(number+1);
            }else{
                number = parseInt(number);
                $(this).parents(".number_box").find("input").val(number-1);
            }
        })

        //提示错误
        var clearTime;
        function showWarn(e_text){
            $(".warn").fadeIn(400);
            $(".warn").find(".warn-word").html(e_text);
            clearTimeout(clearTime);
            clearTime = setTimeout(function () {
                $(".warn").fadeOut(400);
            }, 2000);

        }

        function sign_up(){
            var data_array = $("#fan_sign_up").serializeArray();
            $.ajax({
                url: '/apply',
                type: "post",
                data: data_array,
                dataType: "json",
                ContentType: "text/html",
                beforeSend:function(){
                    $(".sign_up").css({"background-color":"#ac8e8e","color":"#666"}).html("提交中...");
                    $('.sign_up').unbind('click');
                },
                success: function (result) {
                    $(".sign_up").css({"background-color":"#ffb693","color":"#c61f33"}).html("点击报名");
                    $('.sign_up').bind('click',sign_up);
                    showWarn(result);
                },
                error: function (e) {
                    $(".sign_up").css({"background-color":"#ffb693","color":"#c61f33"}).html("点击报名");
                    $('.sign_up').bind('click',sign_up);
//                    console.log(e);
                    showWarn("网络错误，请稍后再试！");
                }
            });
        }

        $('.sign_up').bind('click',sign_up);
    });
</script>
<!--<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
<script>
    wx.config({
        debug: false,
        appId: '${appId}',
        timestamp: '${timestamp}',
        nonceStr: '${nonceStr}',
        signature: '${signature}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareQZone'
        ]
    });
    wx.ready(function(){
        //分享给朋友的数据
        var url = "${p2nrHome}/m/activity/shareCouple";
        var imgUrl = "${p2nrHome}/m/img/couplet/m-couplet-head.png";
        var appData = {
            title: '对下联，赢大奖，怒砸20万等你一句话',
            desc: '对下联可得20万现金！评选前200名均有奖！全民在疯玩，获奖超容易！',
            link: url,
            imgUrl: imgUrl
        }
        //分享给朋友圈数据
        var timeLineData = {
            title: '对下联，赢大奖，怒砸20万等你一句话', // 分享标题
            desc: '对下联可得20万现金！评选前200名均有奖！全民在疯玩，获奖超容易！', // 分享描述
            link: url, // 分享链接
            imgUrl:imgUrl, // 分享图标
        }
        //分享到qq数据
        var qqData = {
            title: '对下联，赢大奖，怒砸20万等你一句话', // 分享标题
            desc: '对下联可得20万现金！评选前200名均有奖！全民在疯玩，获奖超容易！', // 分享描述
            link: url, // 分享链接
            imgUrl:imgUrl, // 分享图标
        }
        //分享到空间数据
        var qZoneData = {
            title: '对下联，赢大奖，怒砸20万等你一句话', // 分享标题
            desc: '对下联可得20万现金！评选前200名均有奖！全民在疯玩，获奖超容易！', // 分享描述
            link: url, // 分享链接
            imgUrl:imgUrl, // 分享图标
        }

        //分享给朋友
        wx.onMenuShareAppMessage(appData);
        //分享到朋友圈
        wx.onMenuShareTimeline(timeLineData);
        //分享到qq
        wx.onMenuShareQQ(qqData);
        //分享到QZone
        wx.onMenuShareQZone(qZoneData);
    });
</script>
</html>